<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      /* animation: all 1s ease; */
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    .container {
      width: 100vw;
      max-width: 100vw;
      height: 400px;
      background-color: black;
      overflow: hidden;
      display: flex;
      flex-direction: row;
    }

    .content {
      color: white;
      white-space: nowrap;
      display: flex;
      flex-direction: row;
    }

    .words {
      /* border-left: 2px solid red; */
      text-shadow: 0px 20px 20px orange;
      line-height: 400px;
      font-size: 300px;
      white-space: nowrap;
    }

    .has-transition {
      transition: all;
    }

    .no-transition {
      transition: none;
    }
  </style>
</head>

<body>

  <div class="container" onclick="startAnimation()">
    <div class="content">
      <div class="words">请注意车距</div>
    </div>
  </div>

  <script>
    let previousTimeStamp = 0;
    let scrollDistance = 0;
    const step = 2;
    let running = false;


    const content = () => document.querySelector(".content");
    const words = () => document.querySelector(".words");
    const contentDom = content();

    function initDom() {
      const container = document.querySelector(".container");
      if (content().scrollWidth <= container.clientWidth) {
        return;
      }
      content().innerHTML += content().innerHTML;
    }


    function useGPU(timestamp) {
      if (timestamp - previousTimeStamp > 10) {
        if (!contentDom.classList.contains("has-transition")) {
          contentDom.classList.add('has-transition');
        }
        scrollDistance -= step;
        contentDom.style.transform = `translateX(${scrollDistance}px)`
        previousTimeStamp = timestamp;
      }
      if (Math.abs(scrollDistance) >= words().clientWidth) {
        // debugger;
        contentDom.classList.remove('has-transition');
        contentDom.classList.add('no-transition');
        scrollDistance = 0;
        contentDom.style.transform = `translateX(${scrollDistance}px)`
      }
    }

    function animation(timestamp) {
      if (running) {
        useGPU(timestamp);
        requestAnimationFrame(animation);
      }
    }

    function startAnimation() {
      running = !running;
      requestAnimationFrame(animation);
    }


    window.onload = () => {
      initDom();
    }

  </script>
</body>

</html>